<script>
  import $ from '../dfish.js'
  import {
    h
  } from 'vue'
  import FormBase from './FormBase.vue'

  export default {
    name: 'w-switch',
    pubParentName: 'w-checkboxgroup',
    mixins: [FormBase],
    props: ['checkedText', 'uncheckedText', 'checkedValue', 'uncheckedValue', 'checked'],
    inject: ['providePubParent'],
    methods: {
      onclick(e) {
        let c = !this.isChecked
        let v = c ? this.x.checkedValue : this.x.uncheckedValue
        // this.x.modelValue = v
        // this.$emit('update:modelValue', v)
        this.val(v)
      },
      formText() {
        return this.isChecked ? this.x.checkedText : this.x.uncheckedText
      },
      html_input() {
        return [
          this.html_input_hidden(),
          h('div', {
            class: 'w-switch-box',
            onclick: this.isNormal && this.onclick
          }, [
            h('i', {
              class: 'w-switch-icon'
            }),
            h('span', {
              class: 'w-switch-text'
            }, this.isChecked ? this.x.checkedText : this.x.uncheckedText),
          ])
        ]
      },
    },
    computed: {
      input_value() {
        return this.isChecked ? this.x.checkedValue : this.x.uncheckedValue
      },
      html_class() {
        return this.isChecked ? 'z-checked' : 'z-unchecked'
      },
      isChecked() {
        return this.x.modelValue == this.x.checkedValue
      }
    }
  }
</script>

<style>
  .w-switch>.w-input {
    flex: none;
    display: inline-flex;
  }

  .w-switch-box {
    flex: 1;
    position: relative;
    height: 22px;
    background: #c0c0c0;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid #c1caca;
    border-radius: 20px;
    color: #fff;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    -webkit-appearance: none;
  }

  .w-switch-icon {
    position: absolute;
    top: 1px;
    left: 1px;
    background: #fff;
    padding: 10px;
    border-radius: 20px;
    box-shadow: 0 2px 4px 0 rgba(0, 35, 11, 0.2);
    transition: all .15s cubic-bezier(.78, .14, .15, .86);
  }

  .w-switch-text {
    float: right;
    min-width: 2px;
    margin-left: 26px;
    margin-right: 8px;
    line-height: 22px;
    font-style: normal;
  }

  .w-switch.z-checked .w-switch-box {
    background: #1890ff;
    border-color: #1890ff
  }

  .w-switch.z-checked .w-switch-icon {
    left: 100%;
    border-color: #1890ff;
    transform: translateX(calc(-100% - 1px));
  }

  .w-switch.z-checked .w-switch-text {
    float: left;
    margin-left: 8px;
    margin-right: 26px;
  }

  .w-switch.z-ds .w-switch-box {
    background: #e6e6e6;
    border-color: #e6e6e6;
    cursor: default
  }

  .w-switch.z-ds .w-switch-icon {
    border-color: #e6e6e6
  }

  .w-switch.z-checked.z-ds .w-switch-box {
    background: #a2d2ff;
    border-color: #a2d2ff
  }

  .w-switch.z-checked.z-ds .w-switch-icon {
    border-color: #a2d2ff
  }
</style>
